<template>
  <div>
    <!--  分割线-->
    <el-divider></el-divider>

    <span style="font-weight:bold;"><span style="color:royalblue">|</span>&nbsp;借档管理</span>
    <!--  分割线-->
    <el-divider></el-divider>
    <!--      点击案件输入框打开查询案件表格-->
    <el-dialog title="案件选择" style="width: 1800px" :visible.sync="dialogTableVisible">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="formInline.values"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.options" placeholder="--请选择搜索对象--">
            <el-option label="--请选择搜索对象--" value="-1"></el-option>
            <el-option label="委托人" value="caseWtr"></el-option>
            <el-option label="对方当事人" value="caseOppositeParties"></el-option>
            <el-option label="承办律师" value="caseAttorney"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getCaseLaw">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="caseLawData"
                border
                ref="multipleTable"
                @select-all="selectAll"
                @select="select"
                @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55"
            align="center">
        </el-table-column>
        <el-table-column property="caseNo" label="案号"></el-table-column>
        <el-table-column property="caseWtr" label="委托人"></el-table-column>
        <el-table-column property="caseOppositeParties" label="对方当事人"></el-table-column>
        <el-table-column property="casePaidsal" label="已付金额"></el-table-column>
        <el-table-column property="caseInvoiced" label="已开票金额"></el-table-column>
        <el-table-column property="caseAttorney" label="承办律师"></el-table-column>
        <el-table-column property="collectionTime" label="收案时间"></el-table-column>
      </el-table>
      <!--    分页-->
      <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          :page-sizes="[2, 4, 6, 8]"
          :total="pageData.total"
          :page-size="formInline.pageNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
      </el-pagination>
    </el-dialog>

    <el-form :label-position="labelPosition" :model="arcForm" :rules="rules" ref="ruleForm" label-width="100px"
             class="demo-ruleForm">
      <el-row>
        <el-col :span="11">
          <el-form-item label="案件:" prop="caseNo">
            <el-input type="hidden" v-model="arcForm.caseLawId"></el-input>
            <el-input v-model="arcForm.caseNo" @click.native="dialogTableVisible = true"
                      suffix-icon="el-icon-edit-outline"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form :inline="true" :model="arcForm" class="demo-form-inline">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="委托人:">
                  <span>{{ arcForm.caseWtr || '无' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="承办律师:">
                  <span>{{ arcForm.caseAttorney || '无' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="案件归档号:">
                  <span>{{ arcForm.caseRecordNum || '无' }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="11">
          <el-form-item label="档案号:" prop="recordNum">
            <el-input v-model="arcForm.recordNum"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="11">
          <el-form-item label="档案名称:" prop="recordName">
            <el-input v-model="arcForm.recordName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="借档人:" prop="borrowFilePeople">
            <el-input v-model="arcForm.borrowFilePeople"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="11">
          <el-form-item label="借出时间:" prop="borrowDate">
            <el-date-picker type="date" style="width: 100%;" v-model="arcForm.borrowDate"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="归还时间:" prop="giveBackDate">
            <el-date-picker type="date" style="width: 100%;" v-model="arcForm.giveBackDate"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注:">
            <el-input type="textarea" v-model="arcForm.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="addBut">
      <el-button type="primary" plain @click="arcAddOrUpdate">提交</el-button>
      <el-button type="primary" plain @click="goBack">返回</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "InsertRecordArchiveslibrary.vue",
  data() {
    return {
      id: this.$route.params.id,
      dialogTableVisible: false,//查询案件表格对话框默认关闭
      caseLawData: [],//查询案件表格返回的数据
      pageData: {},// 存储返回的分页数据
      labelPosition: 'top',//表单顶部对齐
      arcForm: {//档案借阅表单
      },
      //高级查询案件表单
      formInline: {
        values: '',//输入框多值
        options: '',//下拉框取值
        pageId: 1,
        pageNum: 2,
        "chaxun": "1",
      },
      //小红星验证
      rules: {
        caseNo: [
          {required: true, message: '请输入案件名称', trigger: 'blur'}
        ],
        recordNum:[
          {required: true, message: '请输入档案号', trigger: 'blur'}
        ],
        giveBackDate:[
          { required: true, message: '请选择归还时间', trigger: 'change' }
        ],
        borrowDate:[
          {required: true, message: '请选择借出时间', trigger: 'change' }
        ],
        borrowFilePeople:[
          {required: true, message: '请输入借档人名称', trigger: 'blur'}
        ],
        recordName:[
          {required: true, message: '请输入档案名称', trigger: 'blur'}
        ],
      }
    }
  },
  created() {
    console.log(this.$route.params.id)
    this.getCaseLaw()
    this.init()
  },
  methods: {
    init(){
      if (this.$route.params && this.$route.params.id) {//如果进入页面有id   为修改
        // 按id查默认数据
        this.getRecordArchiveslibraryId(this.$route.params.id);
      }
    },
    //根据id查询
    getRecordArchiveslibraryId(id){
      this.$http.get('recordArchiveslibrary', {params: {'id':id, "chaxun": "1"}})
          .then((res) => {
            this.arcForm=res.data.data[0];
            console.log("返回值为==>"+this.arcForm)
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    arcAddOrUpdate(){
      if (this.$route.params && this.$route.params.id) {//如果进入页面有id   为修改
        this.recUpdate();//调用修改方法
      }else {
        this.recAdd();//调用添加方法
      }

    },
    //修改
    recUpdate() {
      this.$http.put('recordArchiveslibrary', this.arcForm)
          .then(
              this.$notify({
                type:"success",
                message:"修改成功"
              }),
              this.$router.push({name:"RecordArchiveslibrary"})
          )
          .catch(function (error) {
            console.log(error);
          });
    },
    //添加
    recAdd(){
        this.$http.post('recordArchiveslibrary', this.arcForm)
            .then(
                this.$notify({
                  type: "success",
                  message: "添加成功"
                }),
                this.$router.push({name:"RecordArchiveslibrary"})
            )
            .catch(function (error) {
              console.log(error);
            });
    },
    //高级查询案件表
    getCaseLaw() {
      this.$http.get('caseLaw', {params: this.formInline})
          .then((res) => {
            this.caseLawData = res.data.data.list;//查询出来的数据
            this.pageData = res.data.data; // 返回的分页参数   pageinit
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //表格中复选框只能选中一个
    select(selection) {
      if (selection.length > 1) {
        let del_row = selection.shift()
        this.$refs.multipleTable.toggleRowSelection(del_row, false)
      }
    },
    selectAll(selection) {
      if (selection.length > 1) {
        selection.length = 1
      }
    },
    //点击复选框获取选中的客户数据
    handleSelectionChange(sels) {
      console.log(sels)
      this.arcForm.caseNo = sels[0].caseNo;
      this.arcForm.caseLawId = sels[0].id;
      this.arcForm.caseWtr = sels[0].caseWtr;
      this.arcForm.caseAttorney = sels[0].caseAttorney;
      this.arcForm.caseRecordNum = sels[0].caseRecordNum;
      this.dialogTableVisible = false;
    },
    //显示几页
    handleSizeChange(val) {
      this.formInline.pageNum = val;
      this.getCaseLaw();
    },
    //每页显示几条
    handleCurrentChange(val) {
      this.formInline.pageId = val;
      this.getCaseLaw();
    },
    //返回主页面
    goBack() {
      this.$router.push("RecordArchiveslibrary")
    }
  }
}
</script>

<style scoped>
.addBut {
  text-align: center;
}
</style>